<!--左侧菜单处理页面-->
<template>
<!--  菜单功能页面-->
  <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
    <!-- 一级菜单功能-->
    <a-sub-menu v-for="item in menuData" :key="item.key">
      <template #title>
          <span>
           <!--这里使用官网的icon，不过不太满意，先暂时使用-->
            <video-camera-filled></video-camera-filled>
            <span >{{item.title}}</span>
          </span>
      </template>
     <!-- 生成二级菜单 , 多级页面本次暂时先不考虑,后期优化掉-->
      <a-menu-item v-for="(sitem,i) in item.children" :key="sitem.key" >
        <video-camera-filled></video-camera-filled>
        <a @click="parentData.addTabs(sitem)">{{sitem.title}}</a>
      </a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>

<script setup lang="ts">
/**
 * 菜单对象 ts
 */
import {ref,defineAsyncComponent} from "vue";

/**
 * 声明菜单结构
 */
interface Menu {
  // 唯一标识
  key : number
  // 显示名称
  ,title : string
  // 内容  文本内容 或者 组件地址
  ,context : any
  //是否有子节点
  ,children?: Menu[]
}
/**
 * 声明home.vue里面的方法，addTabs,通过子调用父来完成addtabs添加元素功能
 */
type Props = {
  addTabs:VoidFunction
}
/**
 * 接收父类的父组件传递过来的参数
 */
let parentData = defineProps<Props>()

/**
 * 组成菜单基本数据
 * 找时间优化成json
 */
const menuData = ref<Menu[]>([
    {key:1,title:"系统管理",context:'abc',children:[
      {key:11,title:"用户管理",context:defineAsyncComponent(() => import('@/views/sys/user/SysUser.vue')),children:[]}
      ,{key:12,title:"员工管理",context:'abc'}
      ,{key:13,title:"角色管理",context:'abc'}
      ,{key:14,title:"资源管理",context:'abc'}
    ]}
    ,{key:2,title:"试卷管理",context:'abc',children:[
      {key:21,title:"规则管理",context:'abc',children:[]}
    ]}
    ,{key:3,title:"题库管理",context:'abc',children:[
      {key:31,title:"试卷管理",context:'abc',children:[]}
    ]}
   ,{key:4,title:"报表系统",context:'abc',children:[
      {key:41,title:"相关报表",context:'abc',children:[]}
    ]}
]);
</script>

<style>

</style>